<template>
  <div style="width:100%;height:240px;padding:30px 30px;">
    <div class="alarm-item">
      <div class="alarm-type">离线</div>
      <div class="alarm-number">{{dataSource.offline_count}}个</div>
      <div class="alarm-progress">
        <Progress :percent="offLineRatio" stroke-color="#5d6067">
          <span>{{offLineRatio}}%</span>
        </Progress>
      </div>
    </div>
     <div class="alarm-item">
      <div class="alarm-type">在线</div>
      <div class="alarm-number">{{dataSource.online_count}}个</div>
      <div class="alarm-progress">
        <Progress :percent="onLineRatio" stroke-color="#2db7f5">
          <span>{{onLineRatio}}%</span>
        </Progress>
      </div>
    </div> 
    <div class="alarm-item">
      <div class="alarm-type">火警</div>
      <div class="alarm-number">{{dataSource.fire_count}}个</div>
      <div class="alarm-progress">
        <Progress :percent="fireRatio" stroke-color="#ed4014">
          <span>{{fireRatio}}%</span>
        </Progress>
      </div>
    </div>
    <!-- <div class="alarm-item">
      <div class="alarm-type">传感器故障</div>
      <div class="alarm-number">{{dataSource.error_count}}个</div>
      <div class="alarm-progress">
        <Progress :percent="errorRatio" stroke-color="#ff9900">
          <span>{{errorRatio}}%</span>
        </Progress>
      </div>
    </div>
   -->
    <div class="alarm-item">
      <div class="alarm-type">低压告警</div>
      <div class="alarm-number">{{dataSource.power_count}}个</div>
      <div class="alarm-progress">
        <Progress :percent="powerRatio" stroke-color="#ffa2d3">
          <span>{{powerRatio}}%</span>
        </Progress>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    LineDataSource: {
      type: Object,
      default: function() {
        return {
           fire_count: 0,
        online_count: 0,
        offline_count: 0,
        power_count: 0
        };
      }
    }
  },
  data() {
    return {
      dataSource: {
        fire_count: 0,
        online_count: 0,
        offline_count: 0,
        power_count: 0
      },
      offLineRatio: 0,
      fireRatio: 0,
      onLineRatio: 0,
      powerRatio: 0
    };
  },
  computed: {},
  watch: {
    LineDataSource(curVal, oldVal) {
   
      this.dataSource = {
        fire_count:curVal.fire_count?curVal.fire_count:0,
        online_count:curVal.online_count?curVal.online_count:0,
        offline_count:curVal.offline_count?curVal.offline_count:0,
        power_count:curVal.power_count?curVal.power_count:0,
      };
      let alarmCount =
        // this.dataSource.error_count +
        this.dataSource.online_count +
        // this.dataSource.integral_count +
        this.dataSource.offline_count 
      if (alarmCount > 0) {
        this.offLineRatio = (
          (this.dataSource.offline_count * 100) /
          alarmCount
        ).toFixed(2);
        this.fireRatio = (
          (this.dataSource.fire_count * 100) /
          alarmCount
        ).toFixed(2);
        this.onLineRatio = (
          (this.dataSource.online_count * 100) /
          alarmCount
        ).toFixed(2);
        // this.errorRatio = (
        //   (this.dataSource.error_count * 100) /
        //   alarmCount
        // ).toFixed(2);
        this.powerRatio = (
          (this.dataSource.power_count * 100) /
          alarmCount
        ).toFixed(2);
      } else {
        this.offLineRatio = 0;
        this.fireRatio = 0;
        this.onLineRatio = 0;
        this.errorRatio = 0;
        this.powerRatio = 0;
      }
    }
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.alarm-item {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  line-height: 40px;
  .alarm-type {
    float: left;
    width: 80px;
    color: #aeaeae;
  }
  .alarm-number {
    float: left;
    width: 50px;
    color: #aeaeae;
  }
  .alarm-progress {
    margin-left: 130px;
  }
}
</style>

